<template>
    <view class="card">
        <!-- 默认插槽 -->
        <view class="card-header" v-if="$slots.header || title">
            <slot name="header">
                <text class="card-title">{{ title }}</text>
            </slot>
        </view>

        <!-- 默认插槽 -->
        <view class="card-body">
            <slot></slot>
        </view>

        <!-- 底部插槽 -->
        <view class="card-footer" v-if="$slots.footer">
            <slot name="footer"></slot>
        </view>
    </view>
</template>

<script setup>
// 定义组件的 props
defineProps({
    title: {
        type: String,
        default: ''
    }
})
</script>

<style scoped lang="scss">
.card {
    background-color: $uni-bg-color;
    border-radius: $uni-border-radius-lg;
    margin: $uni-spacing-row-base;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header {
    padding: $uni-spacing-col-lg $uni-spacing-row-base;
    border-bottom: 1rpx solid $uni-border-color;
    background-color: $uni-bg-color-grey;
}

.card-title {
    font-size: $uni-font-size-lg;
    font-weight: bold;
    color: $uni-text-color;
}

.card-body {
    padding: $uni-spacing-col-lg $uni-spacing-row-base;
}

.card-footer {
    padding: $uni-spacing-col-base $uni-spacing-row-base;
    border-top: 1rpx solid $uni-border-color;
    background-color: $uni-bg-color-grey;
}
</style>